<!--  -->
<template>
  <div class="">
    <div class="cont_scroll bg-c-white br-12">
      <div class="pl-24 pr-24 pb-24 pt-24">
        <!-- 卡收费标准说明 -->
        <div>
          <div class="q-headline">
            <div class="q-headline__mark"></div>
            <div class="q-headline__title">
              <div></div>
              <div class="fs-18 fw-700">卡收费标准说明</div>
            </div>
          </div>

          <div class="h-16"></div>

          <div>
            <!-- <el-alert title="warning alert" type="warning" /> -->
          </div>

          <div class="h-16"></div>
          <div class="fs-16 lh-24 fw-600 c-031520">当前费用明细说明：</div>
          <div class="h-16"></div>
          <div
            class="d-flex flex-wrap-wrap justify-content-between gap-y-24 align-items-stretch"
          >
            <!-- 账户充值 -->
            <div class="w-164">
              <div class="bg-c-f7fafa br-12 h-full">
                <div class="pt-16 pb-16 pl-16 pr-14">
                  <div class="fs-14 lh-20 fw-600 c-26353f h-20">账户充值</div>
                  <div class="h-12"></div>
                  <div class="d-flex">
                    <div>
                      <div>
                        <div class="fs-12 lh-16 c-868e94">
                          <span>当前费率标准</span>
                        </div>
                        <div class="h-4"></div>
                        <div class="fs-28 lh-40 fw-600 c-theme-7">
                          <span>1.5%</span>
                        </div>
                        <div class="h-20"></div>
                        <div>
                          <div class="fs-12 lh-16 c-868e94">
                            <span>费率生效日</span>
                          </div>
                          <div class="h-4"></div>
                          <div class="fs-14 lh-20 fw-600 c-26353f">
                            <span>2022-12-07</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 账户转入费 -->
            <div class="w-164">
              <div class="bg-c-f7fafa br-12 h-full">
                <div class="pt-16 pb-16 pl-16 pr-14">
                  <div class="fs-14 lh-20 fw-600 c-26353f h-20">账户转入费</div>
                  <div class="h-12"></div>
                  <div class="d-flex">
                    <div>
                      <div>
                        <div class="fs-12 lh-16 c-868e94">
                          <span>当前费率标准</span>
                        </div>
                        <div class="h-4"></div>
                        <div class="fs-28 lh-40 fw-600 c-theme-7">
                          <span>1.5%</span>
                        </div>
                        <div class="h-20"></div>
                        <div>
                          <div class="fs-12 lh-16 c-868e94">
                            <span>费率生效日</span>
                          </div>
                          <div class="h-4"></div>
                          <div class="fs-14 lh-20 fw-600 c-26353f">
                            <span>2022-12-07</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 开卡费 -->
            <div class="w-164">
              <div class="bg-c-f7fafa br-12 h-full">
                <div class="pt-16 pb-16 pl-16 pr-14">
                  <div
                    class="fs-14 lh-20 fw-600 c-26353f h-20 d-flex align-items-center"
                  >
                    开卡费
                    <el-tooltip
                      class="box-item"
                      effect="dark"
                      content="前10张开卡免费"
                      placement="top"
                    >
                      <el-icon class="ml-4"><Warning /></el-icon>
                    </el-tooltip>
                  </div>
                  <div class="h-12"></div>
                  <div class="d-flex">
                    <div>
                      <div>
                        <div class="fs-12 lh-16 c-868e94">
                          <span>当前费率标准</span>
                        </div>
                        <div class="h-4"></div>
                        <div class="fs-28 lh-40 fw-600 c-theme-7">
                          <span>$1/张</span>
                        </div>
                        <div class="h-20"></div>
                        <div>
                          <div class="fs-12 lh-16 c-868e94">
                            <span>费率生效日</span>
                          </div>
                          <div class="h-4"></div>
                          <div class="fs-14 lh-20 fw-600 c-26353f">
                            <span>2022-12-07</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 卡交易退款费 -->
            <div class="w-340">
              <div class="bg-c-f7fafa br-12 h-full">
                <div class="pt-16 pb-16 pl-16 pr-14">
                  <div class="fs-14 lh-20 fw-600 c-26353f h-20">
                    卡交易退款费
                  </div>
                  <div class="h-12"></div>
                  <div class="d-flex">
                    <div>
                      <div>
                        <div class="d-flex">
                          <div>
                            <div class="fs-12 lh-16 c-868e94">
                              <span>当前费率标准</span>
                            </div>
                            <div class="h-4"></div>
                            <div class="fs-28 lh-40 fw-600 c-theme-7">
                              <span>56%</span>
                            </div>
                          </div>
                          <div class="w-20"></div>
                          <div
                            class="pl-20"
                            style="border-left: 1px dashed rgb(225, 227, 228)"
                          >
                            <div class="fs-12 lh-16 c-868e94">
                              <span>其他卡段</span>
                            </div>
                            <div class="h-4"></div>
                            <div class="fs-28 lh-40 fw-600 c-theme-7">
                              <span>12%</span>
                            </div>
                          </div>
                        </div>
                        <div class="h-20"></div>
                        <div>
                          <div class="fs-12 lh-16 c-868e94">
                            <span>费率生效日</span>
                          </div>
                          <div class="h-4"></div>
                          <div class="fs-14 lh-20 fw-600 c-26353f">
                            <span>2022-12-07</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 交易撤销费 -->
            <div class="w-164">
              <div class="bg-c-f7fafa br-12 h-full">
                <div class="pt-16 pb-16 pl-16 pr-14">
                  <div
                    class="fs-14 lh-20 fw-600 c-26353f h-20 d-flex align-items-center"
                  >
                    交易撤销费
                    <el-tooltip
                      class="box-item"
                      effect="dark"
                      content="订单完成前取消订单，且订单金额大于5USD的订单会收取此项费用。亚马逊、沃尔玛等电商平台免费。"
                      placement="top"
                    >
                      <el-icon class="ml-4"><Warning /></el-icon>
                    </el-tooltip>
                  </div>
                  <div class="h-12"></div>
                  <div class="d-flex">
                    <div>
                      <div>
                        <div class="fs-12 lh-16 c-868e94">
                          <span>当前费率标准</span>
                        </div>
                        <div class="h-4"></div>
                        <div class="fs-28 lh-40 fw-600 c-theme-7">
                          <span>$1/笔</span>
                        </div>
                        <div class="h-20"></div>
                        <div>
                          <div class="fs-12 lh-16 c-868e94">
                            <span>费率生效日</span>
                          </div>
                          <div class="h-4"></div>
                          <div class="fs-14 lh-20 fw-600 c-26353f">
                            <span>2022-12-07</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 交易授权费 -->
            <div>
              <div class="bg-c-f7fafa br-12 h-full">
                <div class="pt-16 pb-16 pl-16 pr-14">
                  <div class="fs-14 lh-20 fw-600 c-26353f h-20">交易授权费</div>
                  <div class="h-12"></div>
                  <div class="d-flex">
                    <div>
                      <div>
                        <div class="d-flex">
                          <div>
                            <div class="fs-12 lh-16 c-868e94">
                              <span>当前费率标准</span>
                            </div>
                            <div class="h-4"></div>
                            <div class="fs-28 lh-40 fw-600 c-theme-7">
                              <span>$0.3/笔</span>
                            </div>
                          </div>
                          <div class="w-20"></div>
                          <div
                            class="pl-20"
                            style="border-left: 1px dashed rgb(225, 227, 228)"
                          >
                            <div class="fs-12 lh-16 c-868e94">
                              <span>
                                222929/428837/540524卡段合并计算交易失败率达到下图标准后，即会收取对应交易授权费。
                              </span>
                            </div>
                            <div class="h-16"></div>
                            <div class="d-grid gap-16">
                              <div class="d-flex">
                                <div class="fs-14 lh-20 c-26353f w-220">
                                  <span>交易授权失败率≤20%</span>
                                </div>
                                <div class="fs-14 lh-20 fw-600 c-theme-7">
                                  <span>$0/笔</span>
                                </div>
                              </div>
                              <div class="d-flex">
                                <div class="fs-14 lh-20 c-26353f w-220">
                                  <span>20%＜交易授权失败率≤50%</span>
                                </div>
                                <div class="fs-14 lh-20 fw-600 c-theme-7">
                                  <span>$0/笔</span>
                                </div>
                              </div>
                              <div class="d-flex">
                                <div class="fs-14 lh-20 c-26353f w-220">
                                  <span>交易授权失败率＞50%</span>
                                </div>
                                <div class="fs-14 lh-20 fw-600 c-theme-7">
                                  <span>$0/笔</span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="h-20"></div>
                        <div v-if="false">
                          <div class="fs-12 lh-16 c-868e94">
                            <span>费率生效日</span>
                          </div>
                          <div class="h-4"></div>
                          <div class="fs-14 lh-20 fw-600 c-26353f">
                            <span>2022-12-07</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="h-40"></div>
        <!-- 账户 -->
        <div>
          <div class="q-headline">
            <div class="q-headline__mark"></div>
            <div class="q-headline__title">
              <div></div>
              <div class="fs-18 fw-700">账户</div>
            </div>
          </div>
          <div class="h-16"></div>
          <div class="br-12 bg-c-f7fafa">
            <div class="pt-14 pb-24 pl-24 pr-24">
              <div class="d-flex align-items-center">
                <div class="fs-16 lh-24 c-868e94">
                  <span>账户总充值：</span>
                </div>
                <div class="fs-22 lh-32 fw-600 c-26353f">
                  <span>$134,012.72</span>
                </div>
              </div>

              <div class="h-24"></div>
              <div>
                <div>
                  <div class="d-flex h-24">
                    <el-tooltip
                      class="box-item"
                      effect="dark"
                      :content="item.label"
                      placement="top"
                      v-for="item in prepaidData"
                      :key="item.color"
                    >
                      <div
                        class="css-in-js-53191b"
                        :style="scheduleStyle(item)"
                      ></div>
                    </el-tooltip>
                  </div>
                  <div class="h-20"></div>
                  <div class="d-flex justify-content-between">
                    <div v-for="item in prepaidData" :key="item.color">
                      <div class="d-flex align-items-center">
                        <div
                          class="h-12 w-12"
                          :style="'background-color:' + item.color"
                        ></div>
                        <div class="w-4"></div>
                        <div class="fs-12 lh-16 c-868e94">
                          <span>{{ item.label }}</span>
                        </div>
                      </div>

                      <div class="h-10"></div>
                      <div class="d-flex pl-16">
                        <div class="fs-18 lh-28 fw-600 c-26353f">
                          <span>{{ toThousands(item.value) }}</span>
                        </div>
                        <div class="w-4"></div>
                        <div class="fs-12 lh-16 c-868e94 pt-8">
                          <span>({{ scheduleProportion(item) }}%)</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="h-40"></div>
        <!-- 所有卡消费 -->
        <div>
          <div class="q-headline">
            <div class="q-headline__mark"></div>
            <div class="q-headline__title">
              <div></div>
              <div class="fs-18 fw-700">所有卡消费</div>
            </div>
          </div>

          <div class="h-20"></div>
          <div class="d-flex align-items-center">
            <div class="d-flex align-items-center">
              <el-radio-group v-model="current" fill="#3eaeb4">
                <el-radio-button label="按笔数" />
                <el-radio-button label="按金额" />
              </el-radio-group>
            </div>
            <div class="w-16"></div>
            <el-date-picker
              v-model="date"
              type="daterange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              clearable
              class="date-picker-004 date-picker-004--border date-picker-004--mini w-250"
            ></el-date-picker>
            <div class="mr-auto"></div>
          </div>
          <div class="h-20"></div>
          <chart-bar title="柱状图" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import ChartBar from './components/chartBar.vue'
  import { toThousands } from '@/utils'
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      ChartBar,
    },
    name: 'accountStatement',

    data() {
      //这里存放数据
      return {
        toThousands,
        current: '按笔数',
        prepaidData: [
          {
            color: '#6197ff',
            label: '账户余额',
            value: '1748.02',
          },
          {
            color: '#9eca7f',
            label: '累计充值到卡',
            value: '4000.01',
          },
          {
            color: '#f2c96b',
            label: '累计充值预算',
            value: '0.00',
          },
          {
            color: '#df8f66',
            label: '开卡费',
            value: '2300.00',
          },
          {
            color: '#92bdd8',
            label: '账户转出',
            value: '234.12',
          },
        ],
        date: '',
      }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      scheduleStyle(item) {
        if (!item) return ''
        return {
          'background-color': item.color,
          width: this.scheduleProportion(item) + '%',
        }
      },
      scheduleProportion(item) {
        let total = 0
        this.prepaidData.forEach((item) => {
          total += Number(item.value)
        })

        return ((item.value / total) * 100).toFixed(0)
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
  }
</script>

<style lang="scss" scoped>
  .cont_scroll {
    height: 100%;
    overflow-y: scroll;
  }
  .q-headline {
    display: flex;
    align-items: center;
    height: 20px;

    .q-headline__mark {
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 8px;
      background: #3eaeb4;

      .q-headline__title {
        font-size: 18px;
        font-weight: 700;
        line-height: 28px;
        color: #1e2325;
      }
    }
  }

  .css-in-js-53191b {
    height: 20px;
    transition: 0.3s all;
    transform-origin: center bottom;

    &:hover {
      z-index: 1;
      transform: scale(1.05, 1.2);
    }
  }
</style>
